<template>
  <div class="watermark-view">
    <h2>水印处理</h2>
    <div class="card">
      <div class="tabs">
        <button :class="['tab', { active: mode === 'add' }]" @click="mode = 'add'">添加水印</button>
        <button :class="['tab', { active: mode === 'remove' }]" @click="mode = 'remove'">去除水印</button>
      </div>

      <div v-if="mode === 'add'" class="add-watermark">
        <div class="upload-area" @click="selectVideo">
          <p v-if="!inputFile">点击选择视频文件</p>
          <p v-else>{{ inputFile }}</p>
        </div>

        <div v-if="inputFile" class="options">
          <div class="option-group">
            <label>水印类型</label>
            <select v-model="watermarkType">
              <option value="text">文字水印</option>
              <option value="image">图片水印</option>
            </select>
          </div>

          <div v-if="watermarkType === 'text'" class="option-group">
            <label>水印文字</label>
            <input v-model="watermarkText" type="text" placeholder="输入水印文字" />
          </div>

          <div v-if="watermarkType === 'image'" class="option-group">
            <label>水印图片</label>
            <button @click="selectWatermark" class="btn-secondary">选择图片</button>
            <p v-if="watermarkPath">{{ watermarkPath }}</p>
          </div>

          <button @click="addWatermark" :disabled="processing" class="btn-primary">
            {{ processing ? '处理中...' : '添加水印' }}
          </button>
        </div>
      </div>

      <div v-else class="remove-watermark">
        <p class="tip">去除水印功能需要手动指定水印区域坐标</p>
        <div class="upload-area" @click="selectVideo">
          <p v-if="!inputFile">点击选择视频文件</p>
          <p v-else>{{ inputFile }}</p>
        </div>

        <div v-if="inputFile" class="options">
          <div class="coord-inputs">
            <input v-model.number="coords.x" type="number" placeholder="X坐标" />
            <input v-model.number="coords.y" type="number" placeholder="Y坐标" />
            <input v-model.number="coords.width" type="number" placeholder="宽度" />
            <input v-model.number="coords.height" type="number" placeholder="高度" />
          </div>

          <button @click="removeWatermark" :disabled="processing" class="btn-primary">
            {{ processing ? '处理中...' : '去除水印' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const mode = ref<'add' | 'remove'>('add');
const inputFile = ref('');
const watermarkType = ref('text');
const watermarkText = ref('Watermark');
const watermarkPath = ref('');
const processing = ref(false);
const coords = ref({ x: 0, y: 0, width: 100, height: 50 });

const selectVideo = async () => {
  const result = await window.electronAPI.dialog.openFile({
    filters: [{ name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }],
  });

  if (!result.canceled && result.filePaths[0]) {
    inputFile.value = result.filePaths[0];
  }
};

const selectWatermark = async () => {
  const result = await window.electronAPI.dialog.openFile({
    filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg'] }],
  });

  if (!result.canceled && result.filePaths[0]) {
    watermarkPath.value = result.filePaths[0];
  }
};

const addWatermark = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: 'watermarked.mp4',
    filters: [{ name: 'Video', extensions: ['mp4'] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;

  try {
    const options: any = {
      input: inputFile.value,
      output: result.filePath,
      type: watermarkType.value,
    };

    if (watermarkType.value === 'text') {
      options.text = watermarkText.value;
    } else {
      options.watermarkPath = watermarkPath.value;
    }

    await window.electronAPI.video.addWatermark(options);
    alert('添加成功！');
  } catch (error) {
    alert('添加失败：' + error);
  } finally {
    processing.value = false;
  }
};

const removeWatermark = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: 'no-watermark.mp4',
    filters: [{ name: 'Video', extensions: ['mp4'] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;

  try {
    await window.electronAPI.video.removeWatermark({
      input: inputFile.value,
      output: result.filePath,
      ...coords.value,
    });
    alert('去除成功！');
  } catch (error) {
    alert('去除失败：' + error);
  } finally {
    processing.value = false;
  }
};
</script>

<style scoped>
@import '../styles/ConvertView.scss';

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 10px;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.tab.active {
  background: #3498db;
  color: white;
}

.tip {
  padding: 12px;
  background: #fff3cd;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #856404;
}

.coord-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.coord-inputs input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.btn-secondary {
  padding: 8px 16px;
  background: #95a5a6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: #7f8c8d;
}

input[type='text'] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}
</style>
